<template>
  <div>
    <el-dialog :title="dialogtitle" width="800px" class="icon-dialog" :visible.sync="show" :before-close="closeForm"
      append-to-body @open="open">
      <el-form ref="form" :size="size" :model="form" :rules="rules"
        :label-width="$store.getters.device !== 'mobile' ? '16%' : '90px'">
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="账号类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择" @change="typeChange" style="width: 100%;">
                <el-option label="物业" value="1"></el-option>
                <el-option label="个人" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row >
          <el-col :span="24">
            <el-form-item label="分销商名称" prop="property">
              <el-input v-model="form.property" auto-complete="off" placeholder="请输入物业名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="账号" prop="account">
              <el-input v-model="form.account" auto-complete="off" placeholder="请输入账号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="密码" prop="pwd">
              <el-input v-model="form.pwd" type="password" auto-complete="off" placeholder="请输入密码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="手机号" prop="tel">
              <el-input type="number" v-model="form.tel" auto-complete="off" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="分佣比例" prop="return_percent">
              <el-input type="number" v-model="form.return_percent" auto-complete="off" placeholder="请输入分佣比例">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
            <el-col :span="24">
              <el-form-item label="推单返佣比例"  prop="order_percent">
                <el-input
                  v-model="form.order_percent"
                  auto-complete="off"
                  clearable
                  placeholder="请输入拉新返佣比例"
                >
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="submit">
          <span v-if="!loading">确 定</span>
          <span v-else>提 交 中...</span>
        </el-button>
        <el-button @click="closeForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import ImagesUpload from '@/components/common/ImagesUpload.vue'
export default {
  name: 'Servicecategoryupdate',
  components: {
    Treeselect,
    ImagesUpload
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    opentype: {
      type: String,
      default: 'add'
    },
    size: {
      type: String,
      default: 'small'
    },
    info: {
      type: Object
    }
  },
  data() {
    return {
      dialogtitle: '',
      servicedeliverymodearray: [],
      form: {
        title: '',
        ptype: 2,
        status: 1,
        account: '',
        pwd: '',
        tel: '',
        type: '',
        property: '',
        return_percent: ''
      },
      pids: [],
      ptypearray: [],
      loading: false,
      rules: {
        type: [{
          required: true,
          message: '请选择账号类型',
          trigger: 'change'
        }],
        property: [{
          required: false,
          message: '物业名称不能为空',
          trigger: 'blur'
        }],
        account: [{
          required: true,
          message: '账号不能为空',
          trigger: 'blur'
        }],
        pwd: [{
          required: true,
          message: '密码不能为空',
          trigger: 'blur'
        }],
        tel: [{
          required: true,
          message: '手机号不能为空',
          trigger: 'blur'
        }]
        ,
        return_percent: [{
          required: true,
          message: '分佣比例不能为空',
          trigger: 'blur'
        }],
        order_percent: [{
          required: true,
          message: '返佣比例不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    typeChange(e){
      if(e==='1'){
        this.$set(this.rules.property[0],'required',true)
      }else{
        this.$set(this.rules.property[0],'required',false)
      }
    },
    open() {
      if (this.opentype == 'update') {
        this.dialogtitle = '修改'
        this.form = this.info
        if (this.info.pid == '0') {
          this.$delete(this.info, 'pid')
        }
      } else {
        this.dialogtitle = '添加'
        this.form = {
          ptype: 2,
          deliverymode: 1,
          status: 1
        }
        // console.log(this.form);
      }
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$api.post('/wyaccount/update', this.form).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$emit('refesh_list')
            this.closeForm()
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    normalizer(data) {
      if (data.children && !data.children.length) {
        delete data.children
      }
      return {
        id: data.val,
        label: data.key,
        children: data.children
      }
    },
    closeForm() {
      this.$emit('update:show', false)
      this.loading = false
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
    }
  }
}
</script>
